$themes: (
  dayLight: (
    normalBackground: #fff,
    normalText: #000,
    normalTextShadow: 0 0 1px #000
  ),
  nightEye: (
    normalBackground: #000,
    normalText: #fff,
    normalTextShadow: 0 0 2px #fff
  )
);
//遍历主题map
@mixin themeCount {
  @each $themeName, $themeMap in $themes {
    //!global 把局部变量强升为全局变量
    $themeMap: $themeMap !global;
    //判断html的data-theme的属性值  #{}是sass的插值表达式
    //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    [data-theme='#{$themeName}'] & {
      @content;
    }
  }
}
//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($themeMap, $key);
}
//背景颜色
@mixin normalBackground($color) {
  @include themeCount {
    background: themed($color) !important;
  }
}
//字体颜色
@mixin normalText($color) {
  @include themeCount {
    color: themed($color) !important;
  }
}
//文本阴影颜色
@mixin normalTextShadow($color) {
  @include themeCount {
    text-shadow: themed($color) !important;
  }
}
